<template>
<div class="auth-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">Sign up</h1>
        <p class="text-xs-center">
          <RouterLink :to="{name:'login'}"> Have an account?</RouterLink>
        </p>

        <ul class="error-messages">
          <li>That email is already taken</li>
        </ul>
        <div>{{ _errors }}</div>

        <form @submit.prevent="doRegister">
          <fieldset class="form-group">
            <input v-model="regInfo.user.username" class="form-control form-control-lg" type="text" placeholder="Username" />
          </fieldset>
          <fieldset class="form-group">
            <input v-model="regInfo.user.email" class="form-control form-control-lg" type="text" placeholder="Email" />
          </fieldset>
          <fieldset class="form-group">
            <input v-model="regInfo.user.password" class="form-control form-control-lg" type="password" placeholder="Password" />
          </fieldset>
          <input class="btn btn-lg btn-primary pull-xs-right" type="submit" value="Sign up">
        </form>
      </div>
    </div>
  </div>
</div>
</template>
<script setup lang="ts">
import { UserReg } from '@/model';
import { ref } from 'vue';
import { register } from '@/api';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user'

let { setUserInfo } = useUserStore()

const router = useRouter()

let regInfo = ref<UserReg>({
    user:{
        username:"",
        email:"",
        password:""
    }
})

let _errors = ref<string>('')

function doRegister(){
    register(regInfo.value).then(res =>{
        console.log(res.data);
        router.push('/login')
        // router.push({name:"login"})
        setUserInfo(res.data.user)
    }).catch(err=>{
      _errors.value = err
      console.log(err);
    })
}

</script>
<style scoped>
</style>
